<!--用户退货审核-->
<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="68px"
      @submit.native.prevent
    >
      <el-form-item label="订单号" prop="orderNoMain">
        <el-input
          v-model="queryParams.orderNoMain"
          placeholder="请输入订单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="my-tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="退货申请" name="0"></el-tab-pane>
        <el-tab-pane label="审核通过" name="1"></el-tab-pane>
        <el-tab-pane label="审核不通过" name="-1"></el-tab-pane>
        <!--        <el-tab-pane label="买家发货" name="2"></el-tab-pane>-->
        <el-tab-pane label="平台收货" name="2"></el-tab-pane>
        <el-tab-pane label="平台发货" name="3"></el-tab-pane>
        <el-tab-pane label="用户待收货" name="4"></el-tab-pane>
        <el-tab-pane label="待退款" name="7"></el-tab-pane>
        <el-tab-pane label="完成" name="6"></el-tab-pane>
      </el-tabs>
    </div>
    <!--    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
          <el-form-item label="签收状态" prop="sign">
            <dict-select :options="dict.type.sign_status" v-model="queryParams.sign_status" placeholder="请选择签收状态" />
          </el-form-item>
          <el-form-item label="退款状态" prop="status">
            <dict-select :options="dict.type.refund_status" v-model="queryParams.status" placeholder="请选择退款状态" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
    </el-form>-->

    <el-table v-loading="loading" :data="dataList">
      <el-table-column
        label="订单号"
        align="center"
        prop="orderNoMain"
        width="160"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="售后单号"
        align="center"
        prop="orderNo"
        width="160"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="退货人"
        align="center"
        prop="returnUserName"
        width="160"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="商品名称"
        align="center"
        prop="goodsName"
        width="160"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="商品数量"
        align="center"
        prop="num"
        width="160"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="商品总价"
        align="center"
        prop="amount"
        width="160"
        :show-overflow-tooltip="true"
      />
      <!--      <el-table-column label="退货原因" align="center" prop="idea" width="160" :show-overflow-tooltip="true"/>-->
      <el-table-column
        label="退货原因"
        align="center"
        prop="idea"
        width="220"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.return_reason" :value="scope.row.idea"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="运单号"
        align="left"
        prop="idea"
        width="320"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <div>
            <span>运单号：</span>
            {{ scope.row.expressNo }}
          </div>
          <div v-if="scope.row.returnExpress&&(scope.row.type===1||scope.row.type===2)">
            <span>退货/换货运单号（用户发货）：</span>
            <span>{{ scope.row.returnExpress.expressNum }}</span>
          </div>
          <div v-if="scope.row.platformReturnExpress&&scope.row.type===2">
            <span>换货运单号（平台发货）：</span>
            <span>{{ scope.row.platformReturnExpress.expressNum }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="类型"
        align="center"
        prop="type"
        width="160"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.order_return_type" :value="scope.row.type"></dict-tag>
        </template>
      </el-table-column>
      <!--      <el-table-column label="签收状态" align="center" prop="sign" width="160" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sign_status" :value="scope.row.sign"></dict-tag>
        </template>
      </el-table-column>-->
      <el-table-column
        label="审核状态"
        align="center"
        prop="status"
        width="160"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0">待审核</el-tag>
          <el-tag v-if="scope.row.status === 1" type="success">通过</el-tag>
          <el-tag v-if="scope.row.status === -1" type="danger">不通过</el-tag>
          <el-tag v-if="scope.row.status === 2" type="info">买家发货</el-tag>
          <el-tag v-if="scope.row.status === 3" type="warning">平台收货</el-tag>
          <el-tag v-if="scope.row.status === 4" type="danger">平台发货</el-tag>
          <!--          <el-tag v-if="scope.row.status === 5" type="info">用户收货</el-tag>-->
          <el-tag v-if="scope.row.status === 6" type="warning">完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="160"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{m}/{d}/{y}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220">
        <template slot-scope="scope">
          <div class="audit-group">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-notebook-2"
              @click="handleDetails(scope.row)"
            >详情</el-button>
          </div>
          <div v-if="scope.row.status == '2'" class="audit-group">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleSign(scope.row)"
            >平台签收</el-button>
          </div>
          <div v-if="scope.row.status == '3'" class="audit-group">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleDeliver(scope.row)"
            >平台发货</el-button>
          </div>
          <div v-if="scope.row.status == '0'" class="audit-group">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleProjectAuditPass(scope.row,1)"
            >
              {{scope.row.type === 1 ? '同意退货':scope.row.type === 2?'同意换货':scope.row.type === 3 ? '同意退款': '同意退货'}}
              <!-- <dict-tag :options="dict.type.order_return_type" :value="scope.row.type"></dict-tag> -->
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleProjectAuditPass(scope.row,0)"
            >
              <!-- {{scope.row.type === 1 ? '拒绝换货':'拒绝退货'}} -->
              {{scope.row.type === 1 ? '拒绝退货':scope.row.type === 2?'拒绝换货':scope.row.type === 3 ? '拒绝退款': '拒绝退货'}}
            </el-button>
          </div>
          <div v-if="scope.row.status == '7'" class="audit-group">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleMoneyAudit(scope.row)"
            >同意退款</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog title :visible.sync="open" width="1000px" :close-on-click-modal="false">
      <h2>订单状态</h2>
      <el-steps :active="processList.length" align-center>
        <el-step
          :title="orderType+'-'+processTitleList[index]"
          :description="item.createTime"
          v-for="(item,index) in processList"
          :key="index"
        ></el-step>
      </el-steps>
      <el-descriptions title="用户信息" :column="2" direction="horizontal" border>
        <el-descriptions-item label="店铺名称">{{orderDetails.shopName}}</el-descriptions-item>
        <el-descriptions-item label="退货人名称">{{ orderDetails.returnUserName }}</el-descriptions-item>
        <el-descriptions-item label="退货原因">{{ orderDetails.description }}</el-descriptions-item>
        <el-descriptions-item label="主播名称">{{ orderDetails.orderSkuDto.anchorName }}</el-descriptions-item>
        <el-descriptions-item label="商品单价">{{$yun.priceFormatter(orderDetails.orderSkuDto.price) }}</el-descriptions-item>
        <el-descriptions-item label="数量">{{ orderDetails.orderSkuDto.num }}</el-descriptions-item>
        <el-descriptions-item label="总金额">{{$yun.priceFormatter(orderDetails.orderSkuDto.money) }}</el-descriptions-item>
        <el-descriptions-item label="邮费">{{$yun.priceFormatter(orderDetails.orderSkuDto.postage) }}</el-descriptions-item>
      </el-descriptions>
      <div v-show="orderDetails.orderSkuDto.image">
        <h3>商品图片</h3>
        <el-image fit="scale-down" :src="$yun.getPreviewUrl(orderDetails.orderSkuDto.image)"></el-image>
      </div>
      <div v-show="orderDetails.orderSkuDto.goodsDesc">
        <h3>商品描述</h3>
        {{ orderDetails.orderSkuDto.goodsDesc }}
      </div>

      <!--      <el-descriptions-item label="商品描述"></el-descriptions-item>-->
    </el-dialog>
  </div>
</template>

<script>
import {
  returnProduct,
  returnProductAudit,
  returnMoney,
  returnMoneyAudit,
  sign,
  projectAudit,
  moneyAudit,
  haveReturnProduct,
  haveReturnMoney,
  orderReturnDetails, dataListOrder, dataPlatform, platformShipped, shopOrderReturnApproved, dataConfirmed, process
} from '@/api/user/orderReturn'
import Template from '@/views/setting/template/index.vue'
import { passAudit } from '@/api/live/liveAudit'
import { express } from '@/api/order/list'
import { convertTimestamp } from "@/utils/yun"

export default {
  name: 'Approved',
  components: { Template },
  dicts: ['sign_status', 'refund_status', 'order_return_type', 'return_reason'],
  data () {
    return {
      activeName: '0',
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      dataList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: 0,
        orderNoMain: null,
      },
      //订单详情
      orderDetails: {
        returnUserName: '',
        description: '',
        shopName: '',
        orderSkuDto: {
          postage: '',
          money: '',
          num: '',
          price: '',
          name: '',
          anchorName: '',
        }
      },
      // 物流状态
      processList: [],
      processTitleList: ['申请', '确认', '买家发货', '平台收货', '平台发货', '用户收货', '完成（退款）', '不通过'],
      orderType: "",
    }
  },
  created () {
    this.getList()
  },
  methods: {
    handleClick (tab) {
      this.queryParams.status = tab.name
      this.getList()
    },
    getList () {
      dataListOrder(this.queryParams).then(res => {
        this.dataList = res.data.records
        this.total = res.data.total
        this.loading = false
        console.log(this.dataList[0].status)
        if (this.dataList[0].status != this.activeName) {
          this.activeName = this.dataList[0].status + ''
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1
      this.queryParams.status = null
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /* 签收 */
    handleSign: function (row) {
      this.$confirm('是否确定申请单！', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async () => {
        await dataPlatform({ approvedId: row.id })
        this.$modal.msgSuccess('已成功签收申请单！')
        this.getList()
      }).catch(() => {

      })
    },
    // 平台发货
    handleDeliver (row) {
      const h = this.$createElement
      this.$prompt(h('p', null, [h('i', { style: 'color: red' }, '* '),
      h('span', null, '请输入运单号：')]),
        '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.+$/,
        inputErrorMessage: '请输入运单号'
      }).then(async ({ value }) => {
        let data = null
        data = { approvedId: row.id, expressNo: value }
        await platformShipped(data)
        this.$modal.msgSuccess('填写成功！')
        this.getList()
      }).catch(() => {
      })
    },
    /* 退货 */
    handleProjectAuditPass (row, status) {
      if (status == 0) {
        const h = this.$createElement
        this.$prompt(h('p', null, [h('i', { style: 'color: red' }, '* '),
        h('span', null, '请输入退货原因：')]),
          '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^.+$/,
          inputErrorMessage: '请输入退货原因'
        }).then(async ({ value }) => {
          let data = null
          data = { approvedId: row.id, opinion: value, status: status }
          await dataConfirmed(data)
          this.$modal.msgSuccess('拒绝退货成功！')
          this.getList()
        }).catch(() => {
        })
      } else {
        this.$confirm('是否确定审核通过！', '确定', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(async () => {
          await dataConfirmed({ approvedId: row.id, status: status })
          this.$modal.msgSuccess('退货成功！')
          this.getList()
        }).catch(() => {

        })
      }


    },
    /* 退款 */
    handleMoneyAudit: function (row) {
      this.$confirm('是否确定同意退款！', '确定', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async () => {
        console.log('row', row)
        await shopOrderReturnApproved({ approvedId: row.id })
        this.$modal.msgSuccess('已确认退款处理！')
        this.getList()
      }).catch(() => {

      })
    },
    // 查看详情
    handleDetails: function (row) {
      orderReturnDetails(row.id).then(res => {
        this.orderDetails = res.data

        switch (row.type) {
          case 1:
            this.orderType = '退货'
            break
          case 2:
            this.orderType = '换货'
            break
          case 3:
            this.orderType = '退款'
            break
          case null:
            this.orderType = '退货'
            break
        }
        this.open = true
      })
      process(row.id).then(res => {
        this.processList = res.data
        this.processList = this.processList.reverse()
        // console.log(this.processList);
        this.processList.forEach(item => {
          item.createTime = this.$yun.convertTimestamp(item.createTime)
        })

      })
    },
  }
}
</script>
